<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="memo">

    <h1 v-text="msg"></h1>
    <h1>{{msg02}}</h1>

    <input type="text" id="input" v-model="content"><button @click="saveMemo">新建备忘录</button><br><br>

    <hl>
        <li v-for="contents, index in lists">{{index + 1}}. {{contents}} <a href="javascript:;" @click="del(index)">删除</a> </li>

    </hl>
    <br>


    <h3 v-if="lists.length == 0">没有备忘录</h3>
    <h3 v-if="lists.length != 0">当前备忘录共：{{lists.length}}条</h3>

    <a v-if="lists.length != 0"  href="javascript:;" @click="lists = []">全部删除</a>


</div>

</body>
</html>
<script src="./vue.js"></script>
<script>

    new Vue({

        el: "#memo",
        data: {
            lists: ["今晚吃火锅", "今晚打游戏", "今晚要喝酒"],
            msg: "hello world",
            msg02: "备忘录",
            content: ""
        },
        methods: {

            saveMemo(){
                if (this.content){
                    this.lists.push(this.content);
                }
                this.content = "";
            },

            del(index){
                this.lists.splice(index, 1);
            }

        }

    })


</script>